<template>
	<view>
		<!-- 导航栏 -->
		<u-navbar back-text="" :background="background" back-icon-name="list" :is-back="false" title="BTC/ETC" >
			<view class="slot-wrap">
				<view class="map-wrap" >
					<u-icon name="list" color="#ffffff" size="38" @click="show = true"></u-icon>
				</view>
			</view>
			<view class="slot-right" >
				<view class="message-box right-item">
					<u-icon name="more-dot-fill" size="38"></u-icon>
				</view>
			</view>
		</u-navbar>
		
		<!-- 弹出层 -->
		<u-popup v-model="show" length="60%">
			<view>
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" bar-height="6" :bar-width="40"></u-tabs>
				<u-cell-group>
					<u-cell-item  title="BTC/ETC" value="10586.05" :arrow="false" 
					:title-style="{'font-weight':'bold'}"
					:value-styl="{'font-size':'12upx'}"
					:key="item" v-for="item in 10"></u-cell-item>
				</u-cell-group>
			</view>
		</u-popup>
		
		
		<!-- 内容 -->
		<u-row gutter="16" >
			<u-col span="7">
				<u-row class="pay-header" >
					<u-col span="6">					
						<u-button type="warning" class="customStyle buy" size="medium"
						:class="!payType? 'active': null "
						@click="payType=0"
						 :custom-style="customStyle">做多(买入)</u-button>
					</u-col>
					<u-col span="6">					
						<u-button type="warning" size="medium" 
						:custom-style="customStyle"
						:class="payType? 'active': null "
						@click="payType=1"
						class="customStyle sell">做空(卖出)</u-button>
					</u-col>					
				</u-row>
				
				<!-- main -->
				<u-row class="pay-main" >
					<u-col span="12">					
						<text class="pay-title">本金(USDT)</text>
					</u-col>
					<u-col span="12">
						<!-- :class="payPrice==item ? 'active' : null " -->
						<u-button type="warning" size="mini" :key="key" v-for="(item,key) in priceList"
						:class="{'active': payPrice==item && !payType ,'active-sell': payPrice==item && payType }"
						@click="changePrice(item)"
						class="customStyle" >{{item}}</u-button>
					</u-col>
					
					<!-- 杠杆 -->
					<u-col span="12" style="margin-top: 20upx;">					
						<text class="pay-title">杠杆</text>
					</u-col>
					<u-col span="12">
						<u-button type="warning" size="mini" :key="key" v-for="(item,key) in multipleList"
						:class="{'active': payMultiple==item && !payType ,'active-sell': payMultiple==item && payType }"
						@click="changeMultiple(item)"
						class="customStyle" > X {{item}}</u-button>
					</u-col>
					
					<u-cell-group class="price-box">
						<u-cell-item  title="杠杆金额" value="10586.05" :arrow="false" :border-bottom="false"
						:title-style="{'font-weight':'bold'}"
						:value-styl="{'font-size':'12upx'}"></u-cell-item>
						<u-cell-item  title="手续费" value="86.05" :arrow="false" :border-bottom="false"
						:title-style="{'font-weight':'bold'}"
						:value-styl="{'font-size':'12upx'}"></u-cell-item>
						<u-cell-item  title="订单金额" value="86.05" :arrow="false" :border-bottom="false"
						:title-style="{'font-weight':'bold'}"
						:value-styl="{'font-size':'12upx'}"></u-cell-item>
					</u-cell-group>
					<u-col span="12" class="pay-footer">
						<u-button type="warning" size="default" class="buyStyle" :class="{'active': !payType,'active-sell': payType }"> 创建合约 </u-button>
					</u-col>	
					
				</u-row>
				
			</u-col>
			<u-col span="5">				
				
				<u-table :borderColor="'none'">
					<u-tr>
						<u-th>价格</u-th>
						<u-th>数量</u-th>
					</u-tr>
					<u-tr :key="item" v-for="item in 5">
						<u-td>599</u-td>
						<u-td>100</u-td>
					</u-tr>
					<u-tr class="table-price">
						<u-td>
							<text class="price">5899.5</text>
						</u-td>
						<u-td></u-td>
					</u-tr>

					<view class="table-price-after">
						<text class="price">≈582299.52 CNY</text>
					</view>
					
					<u-tr>
						<u-th>价格</u-th>
						<u-th>数量</u-th>
					</u-tr>
					<u-tr :key="item" v-for="item in 5">
						<u-td>599</u-td>
						<u-td>100</u-td>
					</u-tr>		
					
				</u-table>
				
			</u-col>
		</u-row>
		
		
		<u-table :borderColor="'none'"  class="product-list">
			<u-tr class="u-tr">
				<u-th class="u-th">当前委托</u-th>
				<u-th class="u-th"></u-th>
				<u-th class="u-th"></u-th>
			</u-tr>
			<u-tr class="u-tr product-list-item" :key="item" v-for="item in 5">
				<u-td class="u-td product-title"  style="text-align: left;padding-left: 20upx;"> 
					<view class="" style="">
						<text style="color: #606266;font-weight: bold;font-size: 38upx;">买入</text>
						<text style="font-size: 24upx;padding-left: 20upx;"> 10/14 18:30</text>
					</view>
					<view class="">
						<text>价格(USDT)</text>
					</view>
					<view class="">
						<text style="font-size: 24upx;color: #C0C4CC">19995</text>
					</view>
				</u-td>
				<u-td class="u-td">
					<view class="" style="margin-top: 30upx;">
						数量(ETH)
					</view>
					<view class="">
						100
					</view>
				</u-td>
				<u-td class="u-td">
					<u-button type="warning" size="mini"> 撤销 </u-button>
					<view class="" style="font-size: 24upx;margin-top: 20upx;">
						实际成交
					</view>
					<view class="" style="font-size: 24upx;">
						5000
					</view>
				</u-td>
			</u-tr>
		</u-table>	
			
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat'
				},
				show: false,
				list: [{
					name: '自选'
				}, {
					name: 'BTC'
				}, {
					name: 'ETC'
				}],
				current: 0,
				customStyle: {
					marginTop: '0px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					// color: 'red'
				},
				payType:0,
				payPrice: 100,
				priceList:[
					100,200,500,1000,3000,5000,10000
				],
				payMultiple: 10,
				multipleList:[
					10,20,50,100,300,500,1000
				]
			};
		},
		methods:{
			back(index){
				console.log(index)
			},
			change(index) {
				this.current = index;
			},
			changePrice(price){
				this.payPrice = price;
			},
			changeMultiple(number){
				this.payMultiple = number;
			}
			
		}
		
	}
</script>

<style lang="scss">
	
	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}
	
	.right-item {
		margin: 0 12rpx;
		position: relative;
		color: #ffffff;
		display: flex;
	}
	
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.map-wrap {
		display: flex;
		align-items: center;
		padding: 4px 6px;
		color: #fff;
	}
	
	.map-wrap-text {
		padding: 0 6rpx;
	}
	
	// 
	.pay-header{
		padding: 20upx 0;
		
		.customStyle{
			width: 200upx;
			border-radius: 0;
			background-color: #ECECF6;
			color: #303133;
			border: none;
			font-weight: bold;
		}
		.customStyle.buy{
			border-radius: 0 0 50px 0;
		}
		.customStyle.sell{
			border-radius: 50px 0 0 0;
		}
		.buy.active{
			color: #F3F4F6;
			background-color: #00B48E;
		}
		.sell.active{
			color: #F3F4F6;
			background-color: #D14B64;
		}
			
			
	}
	
	// 
	.pay-main{
		.pay-title{
			font-weight: bold;
			margin-top: 20upx;
		}
		.customStyle{
			margin-top: 20upx;
			margin-left: 10upx;
			border-radius: 0;
			background-color: #ECECF6;
			color: #303133;
			border: none;
			font-weight: bold;
			// font-size: 28upx;
		}
		.customStyle.active{
			color: #F3F4F6;
			background-color: #00B48E;
		}
		.customStyle.active-sell{
			color: #F3F4F6;
			background-color: #D14B64;
		}

	}
	.price-box{
		margin-top: 20upx;
		.u-cell{
			padding-top: 0;
			padding-bottom: 0;
		}
	}
	.buyStyle{
		margin-top: 20upx;
		// background-color: #00B48E;
		border-radius: 0;
	}
	.pay-footer .active{
		background-color: #00B48E;
	}
	.pay-footer .active-sell{
		// margin-top: 100px;
		background-color: #D14B64;
	}
	
	
	.table-price{
		text-align: center;
		.price{
			font-weight: bold;
			color: #D14B64;
		}
	}
	.table-price-after{
		margin-bottom: 20upx;
		.price{
			color: #C8C9CC;
			margin-left: 20upx;
			font-size: 28upx;
		}
	}
	
	
.product-list{
	margin-top: 20upx;
	.product-title{
		text-align: center;
	}
	
	.product-list-item{
		border-bottom: 1px solid #DBF1E1;
	}
}
</style>
